<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <canvas id="charts" width="800" height="800"></canvas>
    <script>
      let canvas = document.getElementById('charts')
      let ctx = canvas.getContext('2d')
      //五角星
      ctx.moveTo(100, 100)
      ctx.lineTo(300, 100)
      ctx.lineTo(140, 200)
      ctx.lineTo(200, 50)
      ctx.lineTo(260, 200)
      ctx.lineTo(100, 100)
      ctx.stroke()
      ctx.closePath()
      //填充矩形
      ctx.fillStyle = '#2A54AA'
      ctx.fillRect(400, 400, 100, 100)
    
      //线条矩形
      ctx.strokeStyle = 'pink'
      ctx.strokeRect(500, 500, 100, 80)

      //绘制圆形
      ctx.arc(50, 50, 50, 0, Math.PI * 2, true)
      ctx.fillStyle='#321E2B'
      ctx.fill(); 

      ctx.font='20px 微软雅黑'
      ctx.fillText('你好',600,600)
    </script>
  </body>
</html>
